<template>
	<div class="outer" :style="{width:`${width}%`}">
		<div class="title">
				<span class="need" v-if="struc?.must" :class="{ notShow: struc?.must }">*</span>
				<span>{{ struc?.viewName }}</span>
		</div>
		<div class="contextPackage">
			<el-select
				class="select-1"
				v-model="selectValue.value" 
				:placeholder="struc?.hint" 
				@blur="out($event)"
				@change="out($event)"
				clearable
				>
				<el-option
					v-for="item in struc?.options"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
			<span class="errorhint" v-if="showError">{{ struc?.errorHit }}</span>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, reactive, ref, computed } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";

export default defineComponent({
	type: 201,
	name: "LSelect",
	props: {
		struc: Object as PropType<DataStruc>,
		passWidth: {
			type: Number
		}
	},
	setup: (props, context) => {
		let showError = ref(false);
		let selectValue: DataStruc = reactive( props.struc as DataStruc)
		const dataCheck = useDataCheck();
		let check = () => {
			if (selectValue?.value) {
        showError.value = false;
      } else {
				console.debug("检查出错：",showError);
				showError.value = true;
			}
			
			return !showError.value;
		};
		const width = computed(() => props.passWidth)

		onMounted(() => {
			dataCheck.addDataCheck(check);
		});

		return {showError,check, selectValue, width}
	},

	methods: {
			out(event: MouseEvent) {
				if(!this.selectValue.must) {
					console.log('判断', this.selectValue.must, this.showError)
					this.showError = false;
				} else {
					console.log('进来了')
					this.check()
				}
		},
	},
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer {
	display: flex;
	margin-bottom: 20px;
	width: 33.333%;
	padding-right: 10px;
	box-sizing: border-box;
	.title {
		height: 40px;
    line-height: 40px;
    padding-right: 10px;
		flex: 0 0 auto;
		box-sizing: border-box;
		font-size: $fontSize-1;
		color: $regularText;
		.need {
			color: red;
		}
	}

	.contextPackage {
		position: relative;
		flex: 1;
		line-height: 40px;
		.errorhint {
			@extend .error;
			position: absolute;
			top: 100%;
			line-height: 1;
			height: 10px;
			display: block;
		}

		.notShow{
			display: none;
		}
	}
}

.el-select::before {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: #DCDFE6;
  position: absolute;
  z-index: 1;
  right: 30px;
}

</style>
